export {}

/**
需求： 刷新页面后，展示访问历史记录，记录包含：次数和时间。
 */

// 1. 封装格式化时间函数，支持 Date 和 string 格式的时间，可选参数，转换成功 10:10:10 时分秒
const formatTime = (date?: Date | string) : string =>{
  // 1.1 如果没有传递参数
  if(!date) date = new Date()
  // 1.2 如果用户传递了字符串日期
  if(typeof date === 'string') date = new Date(date)
  // 1.3 取出时分秒
  const hours = date.getHours()
  const minutes = date.getMinutes()
  const seconds = date.getSeconds()
  // 1.4 返回数据
  return `${hours}:${minutes}:${seconds}`
}

// console.log(formatTime());
// console.log(formatTime(new Date()));
// console.log(formatTime('2023-03-13 18:05:05'));


// 2. 定义访问记录单项 对象 类型，定义访问记录 列表 类型，需要存储在本地的 key 字面量类型
type Data = {
  count: number
  time: string
}

type List = Data[]

const KEY = '105-ts-good'

// 3. 封装获取访问历史记录函数，返回类型是 记录列表
const getData = ()=>{
  const str = localStorage.getItem(KEY)
  return JSON.parse(str || '[]') as List
}

// 4. 封装修改访问历史记录函数
const updateData = ()=>{
  // 4.1 获取本地数据
  const list = getData() // Data[]
  // 4.2 取出数组中最后一个对象
  const lastData = list[list.length-1]
  // 4.3 创建一个新对象
  const newData: Data = {
    count: lastData ? lastData.count + 1 : 1,
    time: formatTime()
  }
  // 4.4 把新对象放入数组
  list.push(newData)

  // 4.5 重新存储到本地
  localStorage.setItem(KEY, JSON.stringify(list))
}

// 5. 封装一个展示访问历史记录函数，且调用
const render = ()=>{
  // 5.0 刷新即存储到本地
  updateData()
  // 5.1 读取本地的数据
  const list = getData()
  // 5.2 获取dom对象
  const div = document.getElementById('app') as HTMLDivElement
  // 5.3 赋值
  div.innerHTML = list.map(item => `次数: ${item.count}, 时间: ${item.time}`).join('<br>')
}

render()
